import { reactive, computed, watch } from 'vue'
import type { PropertyPanelProps, SequenceConfig, ButtonType } from '../types'
import Modeling from 'bpmn-js/lib/features/modeling/Modeling.js'
import type { Moddle } from 'bpmn-moddle'
import { useButtonConfig } from './useButtonConfig'

export function useSequenceConfig(props: PropertyPanelProps) {
  const { buttonTypeOptions } = useButtonConfig()

  const sequenceConfig = reactive<SequenceConfig>({
    flowType: 'normal',
    buttonType: undefined,
    conditionExpression: '',
  })

  // 流转类型选项
  const flowTypeOptions = [
    { label: '普通流转路径', value: 'normal' },
    { label: '默认流转路径', value: 'default' },
    { label: '内置按钮', value: 'button' },
    { label: '条件流转路径', value: 'condition' },
  ]

  const showSequenceConfig = computed(() => {
    const type = props.currentElement?.type || ''
    return type === 'bpmn:SequenceFlow'
  })

  // 是否显示表达式输入框
  const showExpressionInput = computed(() => {
    return sequenceConfig.flowType === 'condition'
  })

  // 是否显示按钮选择
  const showButtonSelect = computed(() => {
    return sequenceConfig.flowType === 'button'
  })

  // 处理流转类型变更
  const handleFlowTypeChange = () => {
    if (!props.currentElement || !props.modeler) return
    // 重置相关字段
    sequenceConfig.buttonType = undefined
    sequenceConfig.conditionExpression = ''

    if (sequenceConfig.flowType === 'default') {
      // 设置为默认流转路径
      const modeling = props.modeler.get('modeling') as Modeling
      modeling.updateProperties(props.currentElement, {
        'flowable:isDefault': true,
      })
    } else {
      // 移除默认流转标记
      const modeling = props.modeler.get('modeling') as Modeling
      modeling.updateProperties(props.currentElement, {
        'flowable:isDefault': undefined,
      })
    }

    handleSequenceChange()
  }

  // 处理按钮类型变更
  const handleButtonTypeChange = () => {
    if (sequenceConfig.buttonType) {
      // 自动填充表达式
      sequenceConfig.conditionExpression = `\${operationType == '${sequenceConfig.buttonType}'}`
      handleSequenceChange()
    }
  }

  const handleSequenceChange = () => {
    if (!props.currentElement || !props.modeler) return

    const modeling = props.modeler.get('modeling') as Modeling
    const moddle = props.modeler.get('moddle') as Moddle

    // 只有在条件流转或按钮流转时才设置条件表达式
    if (sequenceConfig.flowType === 'condition' || sequenceConfig.flowType === 'button') {
      const conditionExpression = moddle.create('bpmn:FormalExpression', {
        body: sequenceConfig.conditionExpression,
      })

      modeling.updateProperties(props.currentElement, {
        conditionExpression,
      })
    } else {
      // 清除条件表达式
      modeling.updateProperties(props.currentElement, {
        conditionExpression: undefined,
      })
    }
  }

  // 监听当前元素变化，更新配置
  watch(
    () => props.currentElement,
    (element) => {
      if (element && showSequenceConfig.value) {
        // 判断流转类型
        if (element.businessObject.get('flowable:isDefault')) {
          sequenceConfig.flowType = 'default'
        } else if (element.businessObject.conditionExpression) {
          const expression = element.businessObject.conditionExpression.body
          // 检查是否是按钮表达式
          const buttonMatch = expression?.match(/\${operationType == '(.+)'}/)
          if (buttonMatch) {
            sequenceConfig.flowType = 'button'
            sequenceConfig.buttonType = buttonMatch[1] as ButtonType
          } else {
            sequenceConfig.flowType = 'condition'
          }
          sequenceConfig.conditionExpression = expression || ''
        } else {
          sequenceConfig.flowType = 'normal'
        }
      } else {
        // 重置配置
        sequenceConfig.flowType = 'normal'
        sequenceConfig.buttonType = undefined
        sequenceConfig.conditionExpression = ''
      }
    },
    { immediate: true },
  )

  return {
    sequenceConfig,
    showSequenceConfig,
    handleSequenceChange,
    flowTypeOptions,
    showExpressionInput,
    showButtonSelect,
    handleFlowTypeChange,
    handleButtonTypeChange,
  }
}
